<template>
  <div class="imgList_box">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
            <a class="mui-control-item mui-active" @click="getImg(0)">
                全部
            </a>
            <a class="mui-control-item" v-for="item in imgList_title" :key="item.id" @click="getImg(item.id)">
                {{item.title}}
            </a>
            
        </div>
    </div>
    <!-- 图文内容 -->
    <div class="toImg">
        <ul>
            <router-link :to="'/home/imgList/'+item.id"  tag="li" v-for="item in listImg" :key="item.id" >
                <img v-lazy="item.img_url">
                <div class="info">
                    <h3>{{item.title}}</h3>
                    <div>{{item.zhaiyao}}</div>
                </div>
            </router-link>
        </ul>
    </div>
  </div>
</template>
<script>
import mui from '../../../node_modules/mui/dist/js/mui.js'
export default {
  data() {
    return {
      imgList_title:[],
      listImg:[]
    };
  },
  created(){
      this.getimgList_title();
      this.getImg(0)
  },
  mounted(){
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //初始化滑动区域
    });
  },
  methods:{
      getimgList_title(){//获取图文列表头部
        this.$http.get('api/getimgcategory').then(res=>{
            this.imgList_title=res.body.message;
        })
      },
      getImg(id){
             this.$http.get('api/getimages/'+id).then(res=>{
                 this.listImg=res.body.message;
             })
        }
  }
}
</script>
<style lang="scss" scoped>
  *{
      /* 解决区域滚动时的警告 */
      touch-action: pan-y; 
      list-style: none;
  }
  .imgList_box{
      .toImg{
          ul{
              padding:3px;
              margin: 0;
              li {
                background-color: #ccc;
                text-align: center;
                margin-bottom: 10px;
                box-shadow: 0 0 9px #999;
                position: relative;
                img {
                    width: 100%;
                    vertical-align: middle;
                }
                img[lazy="loading"] {
                    width: 40px;
                    height: 300px;
                    margin: auto;
                }
                .info{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    text-align: left;
                    max-height: 84px;
                    overflow: hidden;
                    background-color: rgba(0,0,0,.5);
                    color: #fff;
                    h3{
                        font-size: 14px;
                    }
                    div{
                        font-size: 12px;
                    }
                }
            }
        }
    }
  }
</style>